<template>
  <div>
    <van-nav-bar title="" left-text="返回" v-bind:title="uname" right-text="增加大瓶" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" id="nav" />
    <div id="bills">
      <van-cell-group>
        <div class="van-hairline--bottom font">{{middle.name}}</div>
        <div class='official'>
          <van-field v-model="middle.price" type="digit" label="单价" placeholder="输入金额" />
          <van-field v-model="middle.number" type="digit" label="数量" placeholder="输入数量" />
          <!--          <van-field v-model="middle.freight" type="digit" label="运费" readonly />
          <van-field v-model="middle.cost" type="digit" label="成本价" readonly />
          <van-field v-model="middle.costTotal" type="digit" label="总成本价" readonly /> -->
        </div>
      </van-cell-group>
      <van-cell-group>
        <div class="van-hairline--bottom font">{{min.name}}</div>
        <div class='official'>
          <van-field v-model="min.price" type="digit" label="单价" placeholder="输入金额" />
          <van-field v-model="min.number" type="digit" label="数量" placeholder="输入数量" />
          <!-- <van-field v-model="min.total" type="digit" label="总额" readonly /> -->
        </div>
      </van-cell-group>
      <van-cell-group>
        <div class="van-hairline--bottom font">{{allnew.name}}</div>
        <div class='official'>
          <van-field v-model="allnew.price" type="digit" label="单价" placeholder="输入金额" />
          <van-field v-model="allnew.number" type="digit" label="数量" placeholder="输入数量" />
          <!-- <van-field v-model="allnew.total" type="digit" label="总额" readonly /> -->
        </div>
      </van-cell-group>
      <van-cell-group>
        <div class="van-hairline--bottom font">{{refund.name}}</div>
        <div class='official'>
          <van-field v-model="refund.price" type="digit" label="单价" placeholder="输入金额" />
          <van-field v-model="refund.number" type="digit" label="数量" placeholder="输入数量" />
          <!-- <van-field v-model="refund.total" type="digit" label="总额" readonly /> -->
        </div>
      </van-cell-group>
      <van-cell-group v-for="(value,index) in eachs" :key="index">
        <div class="van-hairline--bottom font">{{value.name}}</div>
        <a class="delEach" @click="delEachs(index)">删除</a>
        <div class='official'>
          <van-field v-model="value.price" type="digit" label="单价" placeholder="输入金额" @input="onEach(index)" />
          <van-field v-model="value.number" type="digit" label="公斤" placeholder="输入公斤" @input="onEach(index)" />
          <!--          <van-field v-model="value.freight" type="digit" label="运费" readonly />
          <van-field v-model="value.cost" type="digit" label="成本" readonly />
          <van-field v-model="value.costTotal" type="digit" label="总成本" readonly /> -->
        </div>
      </van-cell-group>
    </div>
    <van-button type="primary" size="large" id="check">总额:{{total}}|总运费:{{freightTotal}}|总成本:{{costTotal}}|总利润:{{profitTotal}}</van-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        profitTotal: 0, //总利润
        costTotal: 0, //总成本
        freightRate: 0.207, //运费换算比例
        clienteleList: {}, //客户列表
        price: {}, //金额列表
        uname: '', //客户姓名
        clientele_id: 0, //客户编号
        total: 0, //进库总价
        freightTotal: 0,
        middle: { //中瓶进库信息
          name: '14.5KG',
          price_id: 1,
          number: 0,
          price: 0,
          total: 0,
          freight: 0,
          cost: 0,
          costTotal: 0,
          profitTotal: 0
        },
        min: { //小瓶进库信息
          name: '5KG',
          price_id: 2,
          number: 0,
          price: 0,
          total: 0,
          freight: 0,
          cost: 0,
          costTotal: 0,
          profitTotal: 0
        },
        allnew: { //新瓶进库信息
          name: '新瓶',
          price_id: 5,
          number: 0,
          price: 0,
          total: 0,
          freight: 0,
          cost: 0,
          costTotal: 0,
          profitTotal: 0
        },
        refund: { //退气进库信息
          name: '退气',
          price_id: 4,
          number: 0,
          price: 0,
          total: 0,
          freight: 0,
          cost: 0,
          costTotal: 0,
          profitTotal: 0
        },
        each: { //大瓶基础属性
          name: '大瓶',
          price_id: 3,
          price: 0,
          cost: 0,
        },
        eachs: [] //大瓶进库信息
      }
    },
    computed: {},
    watch: {
      'middle.number': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.middle.total = this.$help.Math.cheng(this.middle.number, this.middle.price).toString()
          this.middle.freight = this.$help.Math.cheng(this.middle.number, 3).toString()
          this.middle.costTotal = this.$help.Math.cheng(this.middle.cost, this.middle.number).toString()
          this.middle.profitTotal = this.$help.Math.cheng(16, this.middle.number).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'middle.price': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.middle.total = this.$help.Math.cheng(this.middle.number, this.middle.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'min.number': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.min.total = this.$help.Math.cheng(this.min.number, this.min.price).toString()
          this.min.freight = this.$help.Math.cheng(this.min.number, 1).toString()
          this.min.costTotal = this.$help.Math.cheng(this.min.cost, this.min.number).toString()
          this.min.profitTotal = this.$help.Math.cheng(8, this.min.number).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'min.price': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.min.total = this.$help.Math.cheng(this.min.number, this.min.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'allnew.number': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.allnew.total = this.$help.Math.cheng(this.allnew.number, this.allnew.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'allnew.price': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.allnew.total = this.$help.Math.cheng(this.allnew.number, this.allnew.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'refund.number': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.refund.total = this.$help.Math.cheng(this.refund.number, this.refund.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      'refund.price': {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.refund.total = this.$help.Math.cheng(this.refund.number, this.refund.price).toString()
          this.mathTotal()
        },
        immediate: false,
        deep: true
      },
      clienteleList: {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.uname = this.clienteleList[this.clientele_id]['uname']
        },
        immediate: false,
      },
      price: {
        handler(val, oldVal) {
          if (!val) {
            return
          }
          this.middle.price = this.price[this.middle.price_id]['pricing']
          this.min.price = this.price[this.min.price_id]['pricing']
          this.allnew.price = this.price[this.allnew.price_id]['pricing']
          this.refund.price = this.price[this.refund.price_id]['pricing']
          this.each.price = this.price[this.each.price_id]['pricing']
          this.middle.cost = this.price[this.middle.price_id]['cost']
          this.min.cost = this.price[this.min.price_id]['cost']
          this.allnew.cost = this.price[this.allnew.price_id]['cost']
          this.refund.cost = this.price[this.refund.price_id]['cost']
          this.each.cost = this.price[this.each.price_id]['cost']
        },
        immediate: false,
      },
    },
    created() {
      const _this = this
      this.eachs = []
      this.clientele_id = this.$route.params.clientele_id
      this.clienteleList = this.$help.Cache('clientele')
      if (this.clienteleList === false) {
        this.$help.Request.get('/fule/clientele').then(res => {
          _this.clienteleList = res['data']
          _this.$help.Cache('clientele', res['data'], 3600)
        })
      }

      this.price = this.$help.Cache('price')
      if (this.price === false) {
        this.$help.Request.get('/fule').then(res => {
          _this.price = res['data']
          _this.$help.Cache('price', res['data'], 3600)
        })
      }
    },
    methods: {
      mathTotal() {
        this.total = this.$help.Math.jia(this.$help.Math.jia(this.$help.Math.jia(this.middle.total, this.min.total).toString(),
          this.refund.total).toString(), this.allnew.total).toString()

        this.freightTotal = this.$help.Math.jia(this.$help.Math.jia(this.$help.Math.jia(this.middle.freight, this.min.freight)
          .toString(),
          this.refund.freight).toString(), this.allnew.freight).toString()

        this.costTotal = this.$help.Math.jia(this.$help.Math.jia(this.$help.Math.jia(this.middle.costTotal, this.min.costTotal)
          .toString(),
          this.refund.costTotal).toString(), this.allnew.costTotal).toString()

        this.profitTotal = this.$help.Math.jia(this.$help.Math.jia(this.$help.Math.jia(this.middle.profitTotal, this.min
            .profitTotal)
          .toString(),
          this.refund.profitTotal).toString(), this.allnew.profitTotal).toString()

        this.eachs.forEach((item, index, array) => {
          this.total = this.$help.Math.jia(this.total, item.total).toString()
          this.freightTotal = this.$help.Math.jia(this.freightTotal, item.freight).toString()
          this.costTotal = this.$help.Math.jia(this.costTotal, item.costTotal).toString()
          this.profitTotal = this.$help.Math.jia(this.profitTotal, item.profitTotal).toString()
        })

      },
      onClickLeft() {
        this.$router.push('/entrepot')
      },
      onClickRight() {
        this.eachs.push({
          name: this.each.name,
          number: 0,
          total: 0,
          price: this.each.price,
          freight: 0,
          cost: this.each.cost,
          costTotal: 0,
          profitTotal: 0
        })
      },
      onEach(index) {
        if (!(this.eachs[index].number > 0)) {
          return
        }
        this.eachs[index].total = this.$help.Math.cheng(this.eachs[index].number, this.eachs[index].price).toString()
        this.eachs[index].freight = this.$help.Math.cheng(this.eachs[index].number, this.freightRate).toString()
        this.eachs[index].costTotal = this.$help.Math.cheng(this.eachs[index].cost, this.eachs[index].number).toString()
        this.eachs[index].profitTotal = this.$help.Math.cheng(this.$help.Math.chu(16, 14.5).toFixed(4), this.eachs[index].number).toFixed(2)
        this.mathTotal()
      },
      delEachs(index) {
        this.eachs.splice(index, 1)
        this.mathTotal()
      }
    }
  }
</script>

<style>
  html {
    background-color: #f7f8fa;
  }

  #bills {
    margin-top: 45px;
    margin-bottom: 47px;
  }

  #bills .font {
    font-size: 0.7rem;
    text-align: left;
    padding-left: 5px;
  }

  #bills .official {
    text-align: left;
    font-size: 0.5rem;
  }

  #total {
    font-size: 0.4rem;
  }

  #nav {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
  }

  #check {
    position: fixed;
    width: 98%;
    bottom: 0.1rem;
    left: 0.1rem;
    z-index: 11;
  }

  .delEach {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 9;
    font-size: 0.4rem;
    text-align: right;
  }
</style>
